<template>
	<view class="header">
		<view class="headerBox">
			<view class="heaLeft" @click="goHome">
				<image src="@/static/dashabordImg/headerLog.png" mode="heightFix"></image>
			</view>
			<view class="iconfont" @click="handleOpen">
				<image src="@/static/dashabordImg/ydDashboardImg2.png" mode="heightFix"></image>
			</view>
			<view class="target" ref="target" v-if="show">
				<up-collapse @change="change" ref="collapse">
					<up-collapse-item title="产品介绍" name="Docs guide">
						<span class="elevenList">
							<span class="eleven-item" @click="handleNavigatToRobot">
								<span class="iconfont fa-jiqiren1">

								</span>
								<span class="iconfontText">
									AI电话机器人
								</span>
							</span>
							<span class="eleven-item" @click="handleNavigatTogroup">
								<span class="iconfont fa-jianting">

								</span>
								<span class="iconfontText">
									群呼系统
								</span>
							</span>
							<span class="eleven-item" @click="handleNavigatToCrm">
								<span class="iconfont fa-a-caidantubiaotuozhan09_caidan">

								</span>
								<span class="iconfontText">
									CRM管理系统
								</span>
							</span>
							<span class="eleven-item" @click="handleNavigatToBigData">
								<span class="iconfont fa-shenfenrenzheng">

								</span>
								<span class="iconfontText">
									大数据线索
								</span>
							</span>

							<span class="eleven-item" @click="handleNavigatToSales">
								<span class="iconfont fa-cunchu">

								</span>
								<span class="iconfontText">
									防封电销卡
								</span>
							</span>

							<span class="eleven-item" @click="handleNavigatToCallback">
								<span class="iconfont fa-dianhua">

								</span>
								<span class="iconfontText">
									回拨系统
								</span>
							</span>
						</span>
					</up-collapse-item>
					<up-collapse-item title="服务保障" name="Variety components">
						<span class="elevenList">
							<span class="eleven-item" @click="handleNavigatToService">
								<span class="iconfont fa-anquanbaozhang">

								</span>
								<span class="iconfontText">
									服务保障
								</span>
							</span>
							<span class="eleven-item" @click="handleNavigatToHelp">
								<span class="iconfont fa-kanshu">

								</span>
								<span class="iconfontText">
									帮助中心
								</span>
							</span>
						</span>
					</up-collapse-item>
					<up-collapse-item title="联系我们" name="Numerous tools">
						<span class="elevenList">
							<view class="eleven-item" @click="handleNavigatToCompany">
								<view class="iconfont fa-guanyu">

								</view>
								<view class="iconfontText">
									关于呼大侠
								</view>
							</view>
							<span class="eleven-item">
								<span class="iconfont fa-jiarubanji">

								</span>
								<span class="iconfontText">
									加入呼大侠
								</span>
							</span>
							<span class="eleven-item">
								<span class="iconfont fa-bodadianhua">

								</span>
								<span class="iconfontText">
									联系方式：027-886-00002
								</span>
							</span>
						</span>

					</up-collapse-item>
				</up-collapse>
			</view>
		</view>
		<!-- <up-popup :show="show" :round="10" customStyle="margin-top:180rpx; height:100%;" :overlay='true' mode="right" :safeAreaInsetTop="false" @close="close" @open="open">
				<view>
		        <text>人生若只如初见，何事秋风悲画扇</text>
				</view>
			</up-popup> -->

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		nextTick
	} from 'vue'
	const show = ref(false)
	const selectQues = ref(false)
	const target = ref(null)
	const collapse = ref(null)
	onMounted(() => {
		document.addEventListener('click', (event) => {
			//判断点击事件是否在目标元素内
			if (!event.target?.currentSrc ?? !event.target?.currentSrc.includes(
					'ydDashboardImg2.png')) {
				if (event.target?.localName != 'span') {
					if (target.value) {
						show.value = false
					}
				}
			}
		});

	});
	const handleNavigatToCompany = function() {
		uni.navigateTo({
			url: '/pages/companyProfile/index'
		})
	}
	const handleNavigatToService = function() {
		uni.navigateTo({
			url: '/pages/service/index'
		})
	}
	const handleNavigatToHelp = function() {
		uni.navigateTo({
			url: '/pages/helpCenter/index'
		})
	}
	const handleNavigatTogroup = function() {
		uni.navigateTo({
			url: '/pages/groupCall/index'
		})
	}
	const handleNavigatToCrm = function() {
		uni.navigateTo({
			url: '/pages/crm/index'
		})
	}
	const handleNavigatToBigData = function() {
		uni.navigateTo({
			url: '/pages/bigData/index'
		})
	}
	const handleNavigatToRobot = function() {
		uni.navigateTo({
			url: '/pages/callRobot/index'
		})
	}
	const handleNavigatToSales = function() {
		uni.navigateTo({
			url: '/pages/salesCard/index'
		})
	}
	const handleNavigatToCallback = function() {
		uni.navigateTo({
			url: '/pages/callBackSys/index'
		})
	}
	const change = function(val) {
		show.value = true
	}
	const close = function() {
		show.value = false
	}
	const open = function() {
		show.value = true
	}
	const handleOpen = function() {
		show.value = !show.value
	}
	const goHome = function() {
		uni.navigateTo({
			url: '/pages/index/index'
		})
	}
</script>

<style lang="scss" scoped>
	@import '@/static/icon/iconfont.css';

	.header {
		height: 80rpx;
		background-color: #fff;
		padding: 0 40rpx;
		position: relative;

		.target {
			position: absolute;
			right: 3rpx;
			top: 80rpx;
			width: 430rpx;
			padding: 0 26rpx;
			background-color: #fff;
			box-shadow: 0 0 15rpx #eee;
			border-radius: 16rpx 0 0 16rpx;
			z-index: 1;

			.elevenList {
				height: 100%;
				display: flex;
				flex-direction: column;
				gap: 42rpx;

				.eleven-item {
					display: flex;
					align-items: center;
					gap: 10rpx;

					.fa-jiqiren1,
					.fa-dianhua,
					.fa-cunchu,
					.fa-shenfenrenzheng,
					.fa-a-caidantubiaotuozhan09_caidan,
					.fa-jianting,
					.fa-anquanbaozhang,
					.fa-kanshu,
					.fa-bodadianhua,
					.fa-dizhi,
					.fa-jiarubanji,
					.fa-guanyu {
						font-size: 25rpx;
					}

					.iconfontText {
						font-size: 26rpx;
						color: #606060;
					}
				}
			}

		}

		:deep(.u-cell__title) {
			font-size: 24rpx;
		}

		.headerBox {
			height: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.heaLeft {
				width: 160rpx;
				height: 120rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.iconfont {
				width: 37rpx;
				height: 28rpx;
				cursor: pointer;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

	}
</style>